<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">订单编号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入订单编号"
            [(ngModel)]="seachParams.okey"
          />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">物流单号</label>
        <div class="common-search-conrol">
          <div class="expno-ref">
            <input
              #expnoRef
              nz-input
              placeholder="请输入物流单号"
              [(ngModel)]="seachParams.expno"
              (keydown.enter)="dealScanInput()"
              (keydown.Tab)="dealScanInput()"
            />
            <!-- <input #expnoRefHidden type="text" nz-input class="defocus-ipt" (focus)="expnoFocus()"> -->
          </div>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">机器编码</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入机器编码"
            [(ngModel)]="seachParams.phoneCode"
            (ngModelChange)="searchCodeChange($event)"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">机器序列号</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入机器序列号"
            [(ngModel)]="seachParams.phoneSerialNumber"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">下单机型</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入下单机型"
            [(ngModel)]="seachParams.umname"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">所属品类</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="seachParams.category"
            nzPlaceHolder="请选择所属品类"
            nzAllowClear
          >
            <nz-option [nzValue]="1" nzLabel="手机"></nz-option>
            <nz-option [nzValue]="2" nzLabel="平板"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">寄件人</label>
        <div class="common-search-conrol">
          <input
            nz-input
            placeholder="请输入姓名或手机号"
            [(ngModel)]="seachParams.lnker"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">验机状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="全部"
            [(ngModel)]="checkStatusSelected"
            (ngModelChange)="multipleChange($event, 'checkStatus')">
            <ng-container *ngFor="let item of machineStateOptions">
              <nz-option [nzLabel]="item.label" [nzValue]="item.id"></nz-option>
            </ng-container>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">验机工程师</label>
        <div class="common-search-conrol">
          <!-- <nz-select
            nzShowSearch
            nzAllowClear
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzPlaceHolder="全部"
            [(ngModel)]="workerSelected"
            (ngModelChange)="workerChange($event)">
            <nz-option
              *ngFor="let item of masterWorkerOptions"
              [nzLabel]="item.name"
              [nzValue]="item.id">
            </nz-option>
          </nz-select> -->
          <input
            nz-input
            placeholder="请输入验机工程师"
            [(ngModel)]="seachParams.checkName"
          />
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">订单状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="orderStateSelected">
            <nz-option
              *ngFor="let item of orderStateOptions"
              [nzLabel]="item.label"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" (click)="seachData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <!-- Table START -->
  <div class="pagination-wrap-position">
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1000px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="200px" nzLeft>订单编号</th>
            <th nzAlign="center" nzWidth="150px">订单状态</th>
            <th nzAlign="center" nzWidth="150px">验机状态</th>
            <th nzAlign="center" nzWidth="120px">验机工程师</th>
            <th nzAlign="center" nzWidth="120px">用户身份</th>
            <th nzAlign="center" nzWidth="150px">下单机型</th>
            <th nzAlign="center" nzWidth="150px">预估合计</th>
            <th nzAlign="center" nzWidth="160px">验机合计</th>
            <th nzAlign="center" nzWidth="180px">验机结果</th>
            <th nzAlign="center" nzWidth="150px">寄件人手机</th>
            <th nzAlign="center" nzWidth="130px">寄件人姓名</th>
            <th nzAlign="center" nzWidth="200px">物流单号</th>
            <th nzAlign="center" nzWidth="120px">下单方式</th>
            <th nzAlign="center" nzWidth="160px">下单时间</th>
            <th nzAlign="center" nzWidth="160px">到货签收时间</th>
            <th nzAlign="center" nzWidth="160px">更新时间</th>
            <th nzAlign="center" nzWidth="180px" nzRight>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of basicTable.data; let index = index;">
            <!-- 订单编号 -->
            <td nzAlign="center" nzLeft>{{ data.okey || '-' }}</td>
            <!-- 订单状态 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.ostat | orderState: 'color'}">
                {{ data.ostat | orderState: 'text' }}
              </span>
            </td>
            <!-- 验机状态 -->
            <td nzAlign="center">{{ data.checkStatus | machineInspectionStatus }}</td>
            <!-- 验机工程师 -->
            <td nzAlign="center">{{ data.checkName || '-' }}</td>
            <!-- 用户身份 -->
            <td nzAlign="center">
              <ng-container *ngIf="data.user_id && data.user_id != '0';else templateUser">
                <button nz-button nzType="link" (click)="userInfoPreview(data)">爱思用户</button>
              </ng-container>
              <ng-template #templateUser>游客</ng-template>
            </td>
            <!-- 下单机型 -->
            <td nzAlign="center">{{ data.umname || '-' }}</td>
            <!-- 预估合计 -->
            <td nzAlign="center">
              {{ (data.uprc || 0) + (data.orderAprc || 0) + (data.cprc || 0) }}
              <span *ngIf="data.orderAprc || data.cprc">（含加价{{ (data.orderAprc || 0) + (data.cprc || 0) }}）</span>
            </td>
            <!-- 验机合计 -->
            <td nzAlign="center">
              <ng-container *ngIf="data?.phoneCheckList?.length && data?.ostat !== 21;else templateyhj">
                <p [ngStyle]="{'color': ((data.bprc || 0) + (data.aprc || 0) + (data.cprc || 0)) < ((data.uprc || 0) + (data.orderAprc || 0) + (data.cprc || 0)) ? '#FF0000' : ''}">
                  {{ (data.bprc || 0) + (data.aprc || 0) + (data.cprc || 0) }}
                  <span *ngIf="data.aprc || data.cprc">（含加价{{ (data.aprc || 0) + (data.cprc || 0) }}）</span>
                </p>
              </ng-container>
              <ng-template #templateyhj>-</ng-template>
            </td>
            <!-- 验机结果 -->
            <td nzAlign="center">{{ data.restype | machineResult }}</td>
            <!-- 寄件人手机 -->
            <td nzAlign="center">{{ data.lnktel || '-' }}</td>
            <!-- 寄件人姓名 -->
            <td nzAlign="center">{{ data.lnker || '-' }}</td>
            <!-- 物流单号 -->
            <td nzAlign="center">{{ data.expno || '-' }}</td>
            <!-- 下单方式 -->
            <td nzAlign="center">
              <span [ngStyle]="{'color': data.orderWay == 2 ? '#FF9933' : ''}">
                {{ data.orderWay == 1 ? '估价下单' : data.orderWay == 2 ? '批量下单' : data.orderWay == 3 ? '快速下单' : '-' }}
              </span>
            </td>
            <!-- 下单时间 -->
            <td nzAlign="center">{{ data.otime11 || '-' }}</td>
            <!-- 到货签收时间 -->
            <td nzAlign="center">{{ data.otime14 || '-' }}</td>
            <!-- 更新时间 -->
            <td nzAlign="center">{{ data.updateTime || '-' }}</td>
            <!-- 操作 -->
            <td nzAlign="center" nzRight>
              <button nz-button nzType="link" [routerLink]="['/aisi-recyc/inspectedMachine']" [queryParams]="{ id: data.id }">查看</button>
            </td>
          </tr>
        </tbody>
      </nz-table>

      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </div>
  <!-- Table END -->
</nz-card>

<!-- Modal 爱思用户信息 -->
<app-user-info-modal #userInfoRef [userId]="modalUserId"></app-user-info-modal>
